<template>
  <div class="top10-echart">
    <div class="top10-echart__content" ref="echartRef"></div>
    <div v-if="loading" class="loading">
      <dv-loading>Loading...</dv-loading>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const echartRef = ref()
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return []
    }
  },
  loading: {
    type: Boolean,
    default: false
  },
})


function handlerData(type) {
  let times = []
  let count = []
  if (props.data.length > 0) {
    props.data.forEach(r => {
      times.push(r.TYPE)
      count.push((r.RATE*100).toFixed(2)*1)
    })
  } else {
    times = ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
    count = times.map(r => 0)
  }
  switch(type) {
    case "时间": return times;
    case "抛料率": return count;
  }
}

function draw(rows) {
  let option = {
    textStyle: {
      fontSize: 18,
    },
    grid: {
      containLabel: true,
      top: "20px",
      left: "0",
      right: "60px",
      bottom: "0",
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      name: '时间',
      axisLabel: { // x轴坐标样式
        fontSize: 16,
        color: "#FFF"
      },
      // data: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
      data: handlerData("时间")
    },
    yAxis: {
      type: 'value',
      axisLabel: { // y轴坐标样式
        fontSize: 16,
        color: "#FFF"
      },
      splitLine: {
        show: true,
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#aaa', '#ddd'],
          type: "dashed"
        },
      },
    },
    series: [
      {
        // data: [82, 93, 90, 93, 129, 133, 132, 20],
        data: handlerData("抛料率"),
        type: 'line',
        areaStyle: {}
      }
    ]
  }


  if (echartRef.value) {
    let myChart = echarts.init(echartRef.value, 'light', {
      renderer: 'canvas',
      useDirtyRect: false
    })
    myChart.setOption(option)
    setTimeout(myChart.resize, 300)
  }
}

watch(() => props.data, draw, { immediate: true })

onMounted(() => {
  draw()
})
</script>
<style lang="less" scoped>
.top10-echart {
  width: 100%;
  height: 100%;
  position: relative;
  .top10-echart__content {
    width: 100%;
    height: 100%;
  }
  .loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}
</style>
